<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>监视鼠标移动</title>
  <script type="text/javascript" src="vue.js"></script>
  <style>
    #app>div{
      width: 128px;
      height: 128px;
    }
  </style>
</head>
<body>
  <div id="app">  
    <p>鼠标位于({{x}},{{y}})</p>
    <p>背景色{{backgroundColor}}</p>
    <div v-on:mousemove="mouseMove" 
      v-bind:style="{backgroundColor}">
    </div>
  </div>

  <script>
    let vm = new Vue({
      el:"#app", 
      data: {x:0, y:0},
      methods:{
        mouseMove(event){
          this.x = event.offsetX;
          this.y = event.offsetY;
        }
      },
      computed:{
        backgroundColor(){
          const c = (this.x+this.y).toString(16);
          return c.length==2 
            ? `#${c}${c}${c}` : `#0${c}0${c}0${c}`;                    
        }
      }
    })
  </script>
</body>
</html>
